<template lang="pug">
    div(class="forum-post-detail")
        div(class="forum-post-detail_main")
            el-row
                el-col(:span="3")
                    img(v-lazy="item.avatar", class="forum-post-detail__avatar", @click.stop="showZone(item.wxUId)")
                el-col(:span="16")
                    div(class="forum-post-detail__uname") 
                      span(@click.stop="showZone(item.wxUId)") {{item.wxUName}}
                    div(class="forum-post-detail__ctime")
                        small {{item.createAt | format('YYYY-MM-DD HH:mm')}}
                el-col(:span="5")
                  follow-button(:target-wx-uid="item.wxUId",:is-following.sync="item.followed")
            div(class="forum-post-detail__item__content")
                p
                  span(v-html="item.content")
        
        div(class="forum-post-detail_comments")
          div(class="comment-toolbar")
            el-row
              el-col(:span="23", :offset="1") 全部评论
        paged-panel(class="reply-list", :init-loading="false", 
                    :completed="panel.completed",@scroll-bottom="getReplies",
                    height="70vh", ref="pagedPanel")
          div(v-for="comment in items", class="batman-comment-list")
            el-row(class="batman-comment-list__item")
              el-col(:span="3", style="text-align:center;")
                img(:src="comment.avatar", class="batman-comment-list_avatar", v-if="comment.avatar", @click="showZone(comment.uId)")
                svg(class="icon batman-comment-list_avatar", aria-hidden="true", @click="showZone(comment.uId)", v-else)
                  use(xlink:href="#icon-morentouxiang")
              el-col(:span="20")
                div(class="icon batman-comment-list_nickname", @click="showZone(comment.uId)") {{comment.uName}}
                div(class="content") 
                  span {{comment.content}} 
                  span(v-if="comment.parentId") //
                  span(v-if="comment.parentId", style="color:green", @click="showZone(comment.parentUId)") @{{comment.parentUName}}
                  span(v-if="comment.parentId") :{{comment.parentContent}}
                div(class="create_at") 
                  span {{comment.createAt | from_now}} 
                  el-tag(type="info",size="mini",@click="reply(comment)") 回复

        batman-comment-form(:visible.sync="formVisible", 
            :reply-root-id="currentReply.replyRootId",
            :reply-id="currentReply.replyId",
            :post-id="item.postId", 
            :placeholder="currentReply.author ? `评论:${currentReply.author}`: '写评论...'",
            @blur="blur",
            ref="form",
            @comment-success="replySuccess")
        active-panel(:visible="userZoneVisible", @history-back="userZoneVisible=false")
          zone(:wx-uid="item.wxUId")
</template>

<script>
import axios from "@/plugins/axios";
import BaseVue from "@/mixins/BaseVue";
import comment from "@/pages/components/comment/index.vue";
import store from "@/plugins/store";
import accessStore from "@/store/AccessStore";
import FollowButton from "@/pages/components/follow-button";
import form from "./form";
import pagedPanel from "batman-paged-panel";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);

import "dayjs/locale/zh-cn"; // load on demand
dayjs.locale("zh-cn"); // use Spanish locale globally

export default {
  name: "post-detail",
  mixins: [BaseVue],
  components: {
    comment: comment,
    "follow-button": FollowButton,
    "batman-comment-form": form,
    "paged-panel": pagedPanel
  },
  data() {
    return {
      item: {},
      items: [],
      query: false,
      base_url: process.env.NODE_ENV !== "development" ? "/" : "/api/",
      /**用戶中心是否可見 */
      userZoneVisible: false,

      has_add_access_record: false,

      page: { maxResultCount: 10, skipCount: 0 },

      query_get_replies: false,
      formVisible: true,

      panel: {
        completed: false
      },

      currentReply: {},

      zone_user_id: null
    };
  },

  props: {
    postId: { type: String, default: null }
  },
  watch: {
    postId(val) {
      if (val) this.getComment(postId);
    }
  },
  computed: {
    /**已查询的数据要排除 */
    comment_id_excludeds() {
      return this.items.map(item => {
        return item.commentId;
      });
    }
  },
  methods: {
    getComment(commentId) {
      const data = { commentId };
      const options = { url: "forum/comment/detail", method: "post", data };
      this.query = true;
      axios(options)
        .then(item => {
          this.item = item;
          this.blur();
          this.getReplies();
        })
        .catch(() => {})
        .then(() => (this.query = false));
    },
    /**
     * 显示评论表单
     */
    showCommentForm() {
      this.$refs.comment.showForm();
    },
    commentSuccess(comment) {},
    getReplies(resolve) {
      const filter = {
        replyRootId: this.item.commentId,
        ExcludeCommentIds: this.comment_id_excludeds
      };
      const data = { page: this.page, filter }; // 分页用来形同虚设

      const options = { url: "forum/comment/replies", method: "post", data };
      this.query_get_replies = true;
      axios(options)
        .then(items => {
          this.items = this.items.concat(items);
          if (items.length === 0) this.panel.completed = true;
        })
        .catch(() => {})
        .then(() => {
          this.query_get_replies = false;
          !resolve || resolve();
        });
    },
    replySuccess() {},
    cal_reply_container() {
      const height = document.querySelector(".forum-post-detail_main")
        .clientHeight;
      const bottom_height = document.querySelector(".batman-comment-form")
        .clientHeight;
      this.$refs.pagedPanel.$el.style.height = `calc(100vh - ${height}px - ${bottom_height}px)`;
    },
    blur() {
      setTimeout(() => {
        // 失去焦点时，评论主体是item
        this.currentReply = {
          author: "",
          replyId: this.item.commentId,
          replyRootId: this.item.commentId
        };
      }, 200);
    },
    reply(item) {
      // 点击回复时
      this.currentReply = {
        author: item.uName,
        replyId: item.commentId,
        replyRootId: this.item.commentId
      };
      this.$refs.form.focus();
    },
    showZone(uid){
      if(!uid) return;
      this.zone_user_id = uid;
      this.userZoneVisible = true;
    }
  },
  mounted() {
    const commentId = this.$route.query.id;
    if (commentId) this.getComment(commentId);

    if (this.commentId) this.getComment(this.commentId);
    this.item.id = commentId || this.commentId;

    this.cal_reply_container();
  },
  filters: {
    from_now(val) {
      return dayjs().from(dayjs(val));
    }
  }
};
</script>

<style lang="less">
@import "../../../common/common.less";

.forum-post-detail {
  background-color: @page_background;
  height: 100vh;

  @main-padding-left: 5px;
  @main-padding-bottom: 10px;
  &_main {
    background-color: white;
    padding: @main-padding-bottom @main-padding-left;
  }

  &__avatar {
    @width: 40px;
    width: @width;
    height: @width;
    border-radius: @width;
  }
  &__item {
    padding: 15px 2px 0;
    margin-bottom: 10px;

    &__content {
      padding-bottom: 18px;
    }

    &__social {
      border-top: 1px solid #e9e9e9;
      height: 32px;
      line-height: 32px;
      margin-left: -@main-padding-left;
      margin-right: -@main-padding-left;
      margin-bottom: -@main-padding-bottom;

      a {
        text-decoration: none;
        color: inherit;
      }

      &_icon {
        @edage: 14px;
        width: @edage;
        height: @edage;
      }
    }
  }

  &__uname {
    color: #eb7350;
    font-weight: bold;
  }

  &__ctime {
    color: grey;
  }

  &__avatar {
    @edge: 2.5em;
    width: @edge;
    height: @edge;
  }

  &_comments {
    margin-top: 8px;

    .comment-toolbar {
      @comment-toolbr-height: 32px;
      height: @comment-toolbr-height;
      line-height: @comment-toolbr-height;
      background-color: white;
      border-bottom: #e9e9e9 1px solid;

      @color: #f76665;
      .comment-label {
        color: @color;
        border-bottom: 1.5px solid @color;
        height: @comment-toolbr-height;
        display: inline-block;
      }
      .active {
        color: @color;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../common/common.less";
.batman-comment-list {
  display: flex;
  width: 100%;

  &__item {
    width: 100%;
    padding: 8px 0 8px;
    background-color: white;
    font-size: 12px;

    .content {
      padding: 5px 0;
    }
    .create_at {
      color: #888;
    }
  }

  &_avatar {
    @avatar_width: 24px;
    width: @avatar_width;
    height: @avatar_width;
    border-radius: @avatar_width;
    box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  }

  &_nickname {
    color: @avatar_color;
    text-shadow: 0.001em 0.001em 0.001em yellow;
    font-size: 14px;
  }

  &_actions {
    padding: 5px 0;
    color: #a0a0a0;
  }
}
</style>

</style>

